<!DOCTYPE html>
<html lang="zxx">

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>Sujon - Contact</title>

		<!-- css include -->
		<link rel="stylesheet" type="text/css" href="css/materialize.css">
		<link rel="stylesheet" type="text/css" href="css/icofont.css">
		<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">

		<!-- my css include -->
		<link rel="stylesheet" type="text/css" href="css/custom-menu.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">

	</head>


	<body>




		<div class="thetop"></div>
		<!-- for back to top -->

		<div class='backToTop'>
			<a href="#" class='scroll'>
				<span>T</span>
				<span>O</span>
				<span>P</span>
				<span class="go-up">
					<i class="icofont icofont-long-arrow-up"></i>
				</span>
			</a>
		</div>
		<!-- backToTop -->




		<!-- ==================== header-section Start ==================== -->
		<header id="header-section" class="header-section w100dt navbar-fixed">

			<nav class="nav-extended main-nav">
				<div class="container">
					<div class="row">
						<div class="nav-wrapper w100dt">

							<div class="logo left">
								<a href="index.html" class="brand-logo">
									<img src="img/logo.png" alt="brand-logo">
								</a>
							</div>
							<!-- logo -->

							<div>
								<a href="#" data-activates="mobile-demo" class="button-collapse">
									<i class="icofont icofont-navigation-menu"></i>
								</a>
								<ul id="nav-mobile" class="main-menu center-align hide-on-med-and-down">
									<li><a href="index.html">HOME</a></li>
									<li><a href="cateogry.html">CATEGORIES</a></li>
									<li class="dropdown">
										<a href="#">PAGES <i class="icofont icofont-simple-down"></i></a>
										<ul class="dropdown-container">
											<li><a href="404.html">404 Page</a></li>
										</ul>
										<!-- /.dropdown-container -->
									</li>
									<li><a href="single-blog.html">BLOG SINGLE</a></li>
									<li class="active"><a href="contact.html">CONTACT</a></li>
								</ul>
								<!-- /.main-menu -->

								<!-- ******************** sidebar-menu ******************** -->
								<ul class="side-nav" id="mobile-demo">
									<li class="snavlogo center-align"><img src="img/logo.png" alt="logo"></li>
									<li class="active"><a href="index.html">HOME</a></li>
									<li><a href="cateogry.html">CATEGORIES</a></li>
									<li><a href="single-blog.html">SINGLE BLOG</a></li>
									<li><a href="contact.html">CONTACT</a></li>
									<li><a href="404.html">404 PAGE</a></li>
								</ul>
							</div>
							<!-- main-menu -->

							<a href="#" class="search-trigger right">
								<i class="icofont icofont-search"></i>
							</a>
							<!-- search -->
							<div id="myNav" class="overlay">
								<a href="javascript:void(0)" class="closebtn">&times;</a>
								<div class="overlay-content">
									<form>
										<input type="text" name="search" placeholder="Search...">
										<br>
										<button class="waves-effect waves-light" type="submit" name="action">Search</button>
									</form>
								</div>
							</div>

						</div>
						<!-- /.nav-wrapper -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</nav>

		</header>
		<!-- /#header-section -->
		<!-- ==================== header-section End ==================== -->





		<!-- ==================== header-section Start ==================== -->
		<section id="breadcrumb-section" class="breadcrumb-section w100dt mb-30">
			<div class="container">

				<nav class="breadcrumb-nav w100dt">
					<div class="page-name hide-on-small-only left">
						<h4>CONTACT</h4>
					</div>
					<div class="nav-wrapper right">
						<a href="index.html" class="breadcrumb">Home</a>
						<a href="contact.html" class="breadcrumb active">Contact</a>
					</div>
					<!-- /.nav-wrapper -->
				</nav>
				<!-- /.breadcrumb-nav -->

			</div>
			<!-- container -->
		</section>
		<!-- /.breadcrumb-section -->
		<!-- ==================== header-section End ==================== -->





		<!-- ==================== contact-section start ==================== -->
		<section id="contact-section" class="contact-section w100dt mb-50">
			<div class="container">

				<div id="map-section" class="map-section w100dt mb-50">
					<div id="google-map">
						<div id="googleMaps" class="google-map-container"></div>
					</div>
					<!-- /#google-map-->
				</div>
				<!-- /#map-section -->

				<div class="row">
					<div class="col m9 s12">
						<div class="sidebar-title left-align">
							<h2>Contact Me</h2>
						</div>

						<div class="contact-me">
							<div class="row">

								<div class="col m6 s12">
									<p class="mb-30">
										If you have any questions, please contact us through our online support system and we will contact you shortly. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore.
									</p>

									<div class="contact-things">
										<div class="c-icon">
											<i class="icofont icofont-location-pin"></i>
										</div>
										<div class="c-text p-0">
											<p>452 Town road, Big House</p>
											<p>New York, NY  45896</p>
										</div>
									</div>
									<!-- /.contact-things -->
									<div class="contact-things">
										<div class="c-icon">
											<i class="icofont icofont-phone"></i>
										</div>
										<div class="c-text">
											<p>+88016 8063 6189</p>
										</div>
									</div>
									<!-- /.contact-things -->
									<div class="contact-things">
										<div class="c-icon">
											<i class="icofont icofont-send-mail"></i>
										</div>
										<div class="c-text">
											<p>info@sitename.com</p>
										</div>
									</div>
									<!-- /.contact-things -->
								</div>
								<!-- colsm6 -->

								<div class="col m6 s12">
									<form class="contact-form" action="#">
										<div class="contact-input">
											<input id="first_name" type="text" class="validate">
											<label for="first_name">First Name</label>
										</div>
										<!-- first_name -->

										<div class="contact-input">
											<input id="email" type="email" class="validate">
											<label for="email" data-error="wrong" data-success="right">Email</label>
										</div>
										<!-- email -->

										<div class="contact-input">
											<input id="subject" type="text" class="validate">
											<label for="subject">Subject</label>
										</div>
										<!-- subject -->

										<div class="contact-input">
											<textarea id="textarea1" class="materialize-textarea"></textarea>
											<label for="textarea1">Type your message</label>
										</div>
										<!-- textarea1 -->
										<button type="button" class="waves-effect waves-light right">SEND MESSAGE</button>
									</form>
									<!-- /.contact-form -->
								</div>
								<!-- colsm6 -->

							</div>
							<!-- row -->
						</div>
						<!-- /.contact-me -->
					</div>
					<!-- colm9 -->

					<div class="col m3 s12">
						<div class="sidebar-title left-align">
							<h2>Get Social</h2>
						</div>

						<ul class="social-link">
							<li>
								<a href="#" class="facebook">
									<span class="s-icon left"><i class="icofont icofont-social-facebook"></i></span>
									<span class="s-name">Facebook</span>
									<span class="s-likes right">53K</span>
								</a>
							</li>
							<li>
								<a href="#" class="twitter">
									<span class="s-icon left"><i class="icofont icofont-social-twitter"></i></span>
									<span class="s-name">Twitter</span>
									<span class="s-likes right">652</span>
								</a>
							</li>
							<li>
								<a href="#" class="google-plus">
									<span class="s-icon left"><i class="icofont icofont-social-google-plus"></i></span>
									<span class="s-name">Google+</span>
									<span class="s-likes right">25K</span>
								</a>
							</li>
							<li>
								<a href="#" class="instagram">
									<span class="s-icon left"><i class="icofont icofont-social-instagram"></i></span>
									<span class="s-name">Instagram</span>
									<span class="s-likes right">10K</span>
								</a>
							</li>
							<li>
								<a href="#" class="dribbble">
									<span class="s-icon left"><i class="icofont icofont-social-dribbble"></i></span>
									<span class="s-name">Dribbble</span>
									<span class="s-likes right">543</span>
								</a>
							</li>
						</ul>
					</div>
					<!-- colm3 -->
				</div>
				<!-- row -->

			</div>
			<!-- container -->
		</section>
		<!-- /#contact-section -->
		<!-- ==================== contact-section end ==================== -->





		<!-- ==================== instag leftram-section Start ==================== -->
		<section id="instagram-section" class="instagram-section w100dt">

			<div class="instagram-link w100dt">
				<a href="#">
					<span>FIND US ON INSTAGRAM</span>
					@SUJONMAJIDESIGN
				</a>
			</div>

		</section>
		<!-- /#instag leftram-section -->
		<!-- ==================== instag leftram-section End ==================== -->





		<!-- ==================== footer-section Start ==================== -->
		<footer id="footer-section" class="footer-section w100dt">
			<div class="container">

				<div class="footer-logo w100dt center-align mb-30">
					<a href="#" class="brand-logo">
						<img src="img/logo.png" alt="brand-logo">
					</a>
				</div>
				<!-- /.footer-logo -->

				<ul class="footer-social-links w100dt center-align mb-30">
					<li><a href="#" class="facebook">FACEBOOK</a></li>
					<li><a href="#" class="twitter">TWITTER</a></li>
					<li><a href="#" class="google-plus">GOOGLE+</a></li>
					<li><a href="#" class="linkedin">LINKDIN</a></li>
					<li><a href="#" class="pinterest">PINTEREST</a></li>
					<li><a href="#" class="instagram">INSTAGRAM</a></li>
				</ul>

				<p class="center-align">
					<i class="icofont icofont-heart-alt l-blue"></i>  
					All Right Reserved, Deasined by 
					<a href="#" class="l-blue">HTMLmate</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
				</p>

			</div>
			<!-- container -->
		</footer>
		<!-- /#footer-section -->
		<!-- ==================== footer-section End ==================== -->










		<!-- my custom js -->
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/materialize.js"></script>
		<script type="text/javascript" src="js/owl.carousel.min.js"></script>
		<!-- Google Maps Script  -->
		<script src="http://maps.google.com/maps/api/js?key=AIzaSyC61_QVqt9LAhwFdlQmsNwi5aUJy9B2SyA"></script>
		<script type="text/javascript" src="js/gmap3.min.js"></script>

		<!-- my custom js -->
		<script type="text/javascript" src="js/custom.js"></script>

		<script type="text/javascript">
		
			$(document).ready(function (){
				
				"use strict";
				function isMobile() { 
					return ('ontouchstart' in document.documentElement);
				}

				function init_gmap() {
					if ( typeof google == 'undefined' ) return;
					var options = {
						center: [23.7110734,90.4871938],
						zoom: 14,
						mapTypeControl: true,
						mapTypeControlOptions: {
							style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
						},
						navigationControl: true,
						scrollwheel: false,
						streetViewControl: true,
					}

					if (isMobile()) {
						options.draggable = false;
					}

					$('#google-map').gmap3({
						map: {
							options: options
						},
						marker: {
							latLng: [23.7110734,90.4871938],
							options: { icon: 'img/mark.png' }
						}
					});
				}
				init_gmap();
        /* - Google Map - with support of gmaps.js End 
        --------------------------------------------------------------------*/

    });
</script>


	</body>

</html>